<template>
  <div>
    <!-- Drawer抽屉 -->
    <Card>


      <Card  style="width: 90%;margin: 0 auto;background-color: ghostwhite;font-weight: bolder;font-size: 12px;font-family: '微软雅黑 Light'" class="drawer-content">
        <p slot="title" >
          会员登记
        </p>
        <Form ref="form" :model="form" :rules="formValidate" label-position="top">
          <Row :gutter="6">
            <Col span="12">
              <FormItem label="卡号" prop="memberCardNo">
                <Input  v-model="form.memberCardNo"/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="会员头像" prop="memberFaceUrl">
                <uploadThumb  multiple limit="1" width="60px" height="60px" v-model="form.memberFaceUrl"></uploadThumb>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="会员姓名" prop="memberName">
                <Input  v-model="form.memberName"/>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="手机号码" prop="memberTel">
                <Input  v-model="form.memberTel"/>
              </FormItem>
            </Col>

            <Col span="8">
              <FormItem label="固定电话" prop="memberGdTel">
                <Input  v-model="form.memberGdTel"/>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="会员生日" prop="memberBirthDay">
                <DatePicker  type="date" v-model="form.memberBirthDay" clearable transfer
                            style="width: 100%"></DatePicker>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="会员性别" prop="memberSex">
                <dict  v-model="form.memberSex" dict="sex" transfer></dict>
              </FormItem>
            </Col>

            <Col span="8">
              <FormItem label="会员等级" prop="memberLevel">
                <dict  v-model="form.memberLevel" dict="memberLevel" transfer></dict>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="会员密码" prop="memberPassword">
                <password  v-model="form.memberPassword"></password>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="电子邮箱" prop="memberEmail">
                <Input  v-model="form.memberEmail" clearable/>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="开卡时间" prop="memberUseDate">
                <DatePicker  type="date" v-model="form.memberUseDate" clearable transfer
                            style="width: 100%"></DatePicker>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="过期时间" prop="memberEndDate">
                <DatePicker  type="date" v-model="form.memberEndDate" clearable transfer
                            style="width: 100%"></DatePicker>
              </FormItem>
            </Col>

            <Col span="8">
              <FormItem label="会员地址" prop="memberAddress">
                <Input  v-model="form.memberAddress" clearable/>
              </FormItem>
            </Col>

            <Col span="24">
              <FormItem label="备注" prop="remark">
                <Input  v-model="form.remark" type="textarea" :rows="4" maxlength="200" show-word-limit/>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <div>
          <Button type="primary" :loading="submitLoading" @click="submit"> 新 增 </Button>
        </div>
      </Card>
    </Card>

  </div>
</template>

<script>
// 根据你的实际请求api.js位置路径修改
import {addMember, editMember} from "@/api/index";
import uploadThumb from "@/views/my-components/xboot/upload-pic-thumb";
import password from "@/views/my-components/xboot/set-password";
import dict from "@/views/my-components/xboot/dict";

export default {
  name: "addEdit",
  components: {
    uploadThumb,
    password,
    dict,
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    type: {
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      visible: this.value,
      title: "",
      submitLoading: false,
      maxHeight: 510,
      form: { // 添加或编辑表单对象初始化数据
        memberCardNo: "",
        memberName: "",
        memberTel: "",
        memberGdTel: "",
        memberBirthDay: "",
        memberSex: "",
        memberPassword: "",
        memberLevel: "",
        memberEmail: "",
        memberEndDate: "",
        memberAddress: "",
        memberUseDate: "",
        remark: "",
        memberFaceUrl: [],
      },
      // 表单验证规则
      formValidate: {
        memberCardNo: [{required: true, message: "不能为空", trigger: "change"}],
        memberName: [{required: true, message: "不能为空", trigger: "change"}],

      }
    };
  },
  methods: {
    init() {
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (typeof this.form.memberBirthDay == "object") {
            this.form.memberBirthDay = this.format(this.form.memberBirthDay, "yyyy-MM-dd");
          }
          if (typeof this.form.memberEndDate == "object") {
            this.form.memberEndDate = this.format(this.form.memberEndDate, "yyyy-MM-dd");
          }
          if (typeof this.form.memberUseDate == "object") {
            this.form.memberUseDate = this.format(this.form.memberUseDate, "yyyy-MM-dd");
          }
          this.submitLoading = true;
          addMember(this.form).then(res => {
            this.submitLoading = false;
            if (res.success) {
              this.form = {}
              this.form.memberFaceUrl = []
              this.$Modal.success({
                title:"添加成功"
              })
            }
          });
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "编辑";
        this.maxHeight =
            Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type == "2") {
        this.title = "添加";
        this.maxHeight =
            Number(document.documentElement.clientHeight - 121) + "px";
      } else {
        this.title = "详细信息";
        this.maxHeight = "100%";
      }
      // 清空数据
      this.$refs.form.resetFields();
      if (this.type == "0" || this.type == "1") {
        // 回显数据处理
        this.form = this.data;
        if (this.form.memberFaceUrl != '' &&
            this.form.memberFaceUrl != null
        )
        {
          this.form.memberFaceUrl = [this.form.memberFaceUrl]
        }
      } else {
        // 添加
        delete this.form.id;
        this.form.memberFaceUrl = []
      }
      this.visible = value;
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
</style>
<style lang="less" scoped>

</style>
